<!--
 * @Description: Description
 * @Author: wangshaokang
 * @Date: 2024-07-17 14:11:09
 * @LastEditors: wangshaokang
 * @LastEditTime: 2024-07-19 13:22:56
-->
<template>
	<div class="box">
		<div class="UserHeader" @click="addUser">
			<van-cell-group class="top">
				<div><img src="@/assets/image/user.svg" /></div>
				<div>
					<van-cell title="新增用户" />
				</div>
			</van-cell-group>
		</div>
		<div class="search">
			<van-search v-model="keyword" placeholder="关键字搜索，如服务人员姓名" @search="onSearch" />
			<div class="searchbar">
				<div class="searchbar-left">
					<van-dropdown-menu swipe-threshold="4">
						<van-dropdown-item title="所属机构" :options="option2" />
						<van-dropdown-item title="角色" :options="option2" />
						<van-dropdown-item title="性别" :options="option2" />
						<van-dropdown-item title="出生日期" :options="option2" />
						<van-dropdown-item title="出生日期" :options="option2" />
						<van-dropdown-item title="出生日期" :options="option2" />
					</van-dropdown-menu>
				</div>
				<div class="searchbar-right">
					<img src="@/assets/image/user.svg" />
				</div>
			</div>
		</div>
		<div class="content">
			<van-cell-group inset>
				<div class="card-head">
					<div class="userimg">
						<div class="img"><img src="@/assets/image/man.svg" /></div>
						<div class="username">
							<div class="name">
								<span>孟浩然</span>
								<span class="tag">
									<van-tag round plain type="success">有效</van-tag>
								</span>
							</div>
							<div class="dateBirth">出生日期：1986-12-04</div>
						</div>
						<div class="viewInfo">
							查看详情
							<van-icon name="arrow" />
						</div>
					</div>
					<div class="uesrInfo">
						<van-row :gutter="[20, 20]">
							<van-col span="12">工号：</van-col>
							<van-col span="12">部门：</van-col>
							<van-col span="12">角色：</van-col>
						</van-row>
						<!-- <div>
							<span>工号：</span>
							<span>部门：</span>
						</div>
						<div>角色：</div> -->
					</div>
				</div>
				<div class="info-Btn"></div>
			</van-cell-group>
			<van-cell-group inset>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>

				<div>1</div>
			</van-cell-group>
			<van-cell-group inset>
				<div>1</div>
				<div>1</div>
				<div>1</div>
			</van-cell-group>
			<van-cell-group inset>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
			</van-cell-group>
		</div>
	</div>
</template>
<script setup lang="ts">
	const router = useRouter();
	const keyword = ref("");

	const addUser = () => {
		router.push({
			path: "AddUser",
		});
	};
	const onSearch = () => {
		console.log("1111");
	};
</script>

<style scoped lang="scss">
	.box {
		padding-top: 8px;
		.UserHeader {
			height: 56px;
			.top {
				display: flex;
				align-items: center;
				padding-left: 21px;
				div {
					font-size: 16px;
					img {
						width: 24px;
						height: 24px;
					}
				}
			}
		}
		.search {
			.searchbar {
				display: flex;
				align-items: center;
				.searchbar-left {
					// width: 336px;
					width: 90%;
				}
				.searchbar-right {
					display: flex;
					justify-content: center;
					width: 10%;
				}
			}
		}
		.content {
			padding-top: 12px;
			.van-cell-group {
				height: 170px;
				margin-bottom: 12px;
				padding: 12px;
				.card-head {
					height: 128px;
					border-bottom: 1px solid #f0f0f0;
					.userimg {
						height: 40px;
						display: flex;
						align-items: center;
						.img {
							margin-right: 8px;
							height: 40px;
							width: 40px;
						}
						.username {
							.name {
								display: flex;
								align-items: center;
								.tag {
									margin-left: 12px;
								}
							}
							.dateBirth {
								margin-top: 2px;
								font-size: 12px;
								color: #999999;
							}
						}
						.viewInfo {
							font-size: 12px;
							color: #2e7df3;
							position: absolute;
							right: 30px;
						}
					}
					.uesrInfo {
						margin-left: 47px;
						font-size: 14px;
						margin-top: 12px;
						color: #666666;
					}
				}
				.info-Btn {
					height: 41px;
				}
			}
		}
	}
</style>
